<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="标段编号">
              <j-input placeholder="请输入标段编号" v-model="queryParam.bidSectionCode"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="标段名称">
              <j-input placeholder="请输入标段名称" v-model="queryParam.bidSectionName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="pushOrder(record)">办理</a>
          <a-divider type="vertical" />
          <a @click="doShowDetail(record)">查看办理情况</a>
        </span>
      </a-table>
    </div>
    <schedule-detail ref="modalScheduleDetail"></schedule-detail>

    <a-modal v-model="areaVisible" title="选择保函" :footer="null" @cancel="handleCancel" :width="820">
      <div style="padding: 40px 0;">
        <a-row :gutter="[16, 16]" type="flex" justify="center">
          <a-col :span="8" v-for="area in areas" :key="area.value">
            <a-card hoverable @click="selectArea(area.value)" :class="{ 'selected-area': selectedArea === area.value }">
              <a-card-meta :title="area.label"></a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction, getAction } from '@api/manage'
import ScheduleDetail from '@/views/exProjectInfo/feeBail/ScheduleDetail'
export default {
  name: 'ExBondPaysituationList',
  mixins: [JeecgListMixin, mixinDevice],
  components: { ScheduleDetail },
  data() {
    return {
      description: '办理',
      areas: [
        { label: '明川电子保函', value: 'MCBH' },
        { label: '景新电子保函', value: 'JXBH' },
      ],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '标段编号',
          align: 'center',
          dataIndex: 'bidSectionCode',
        },
        {
          title: '标段名称',
          align: 'left',
          dataIndex: 'bidSectionName',
        },
        {
          title: '项目编号',
          align: 'center',
          dataIndex: 'projectCode',
        },
        {
          title: '项目名称',
          align: 'left',
          dataIndex: 'projectName',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/exProject/exSection/listAll',
        pushOrder: 'tender/guarantee/apply', //申请保函
      },

      dictOptions: {},
      superFieldList: [],
      projectId: '',
      projectName: '',
      areaVisible: false,
      selectRow: null,
    }
  },
  created() {
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    this.loadData()
  },
  computed: {},
  methods: {
    initDictConfig() {},
    pushOrder(item) {
      this.selectRow = item
      this.areaVisible = true
    },
    doShowDetail(record) {
      this.$refs.modalScheduleDetail.show(record.id)
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      console.log('this.projectInfo.projectId', this.projectId)
      if (!this.projectId) {
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      params['projectId'] = this.projectId
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    selectArea(value) {
      var that =this;
      postAction(this.url.pushOrder, { bidSectionId: this.selectRow.id, orgFlag: value }).then((res) => {
        window.open(res.result)
        that.areaVisible = false;
      })
    },
    handleCancel() {
      this.areaVisible = false
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>